<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>内边距</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul,li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .list{
            width: 710px;   
            margin: 100px auto;
        }
        .list>li{
           display: inline-block;
           border: 1px solid #ccc;
           margin-right: 10px;
           text-align: center;
       }
       img{
            opacity: 0.6;
       }
    </style>
</head>
<body>
    <ul class="list">
        <li>
            <img src="img/img1.jpg" alt="">
            <p>此处添加图像描述</p>
        </li>
        <li>
            <img src="img/img2.jpg" alt="">
            <p>此处添加图像描述</p>
        </li>
        <li>
            <img src="img/img3.jpg" alt="">
            <p>此处添加图像描述</p>
        </li>
        <li>
            <img src="img/img4.jpg" alt="">
            <p>此处添加图像描述</p>
        </li>
    </ul>
</body>
</html>